<template>
  <div class="integralExchangeRecord">
    <navBar :title="title"></navBar>
    <div class="invoiceForm">
        <van-field
            v-model="invoice.invoice_title"
            required
            clearable
            label="抬头"
            right-icon="question-o"
            placeholder="请输入发票抬头"
            @click-right-icon="$toast('个人姓名/企业名称')"
        />
        <van-field
            v-model="invoice.taxpayer"
            required
            clearable
            label="税号"
            right-icon="question-o"
            placeholder="请输入税号"
            @click-right-icon="$toast('身份证号/企业信用代码')"
        />
        <van-button class="submit" type="default" @click="confirm">确认</van-button>
    </div>
  </div>
</template>

<script>
import navBar from "components/navBar";
import { Field } from 'vant';
import { Button } from 'vant';
Vue.use(Button);
Vue.use(Field);
export default {
  name: "",
  data() {
    return {
      title: "发票信息",
      invoice: {
        invoice_title: '',
        taxpayer: '',
      }
    };
  },
  mounted(){
    var invoice = this.$cookie.get('invoice')
    if(invoice){
        this.invoice = invoice
    }
  },
  watch:{
    'invoice.invoice_title'(){
        this.$cookie.set('invoice', this.invoice )
        this.$emit('input', this.invoice)
    },
    'invoice.taxpayer'(){
        this.$cookie.set('invoice', this.invoice )
        this.$emit('input', this.invoice)
    },
  },
  methods:{
    confirm(){
        if(this.invoice.invoice_title && this.invoice.taxpayer) {
            this.$store.commit('setInvoice', this.invoice)
            this.$router.back(-1)
        }else{
            this.$toast('信息不完整')
        }
    }
  },
  components: {
    navBar
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.invoiceForm{
    width: 350px;
    margin: 10px auto;
    position: relative;
    height: calc(100vh - 50px);
    .submit{
        background: #012F40;
        color: #FFF;
        width: 333px;
        position: absolute;
        bottom: 40px;
        left: 10px;
    }
}
</style>
